<template>
	<view class="category-page">

		<!-- 搜索框 -->
		<view class="search-box">
			<input type="text" placeholder="请搜索商品" class="search-input" @click="goToSearch" />
		</view>

		<!-- 主体：左侧分类 + 右侧商品 -->
		<view class="main-container">
			<!-- 左侧分类栏 -->
			<view class="left-category">
				<view v-for="(item, index) in categoryList" :key="index" class="category-item"
					:class="{ active: currentIndex === index }" @click="switchCategory(index)">
					{{ item.name }}
				</view>
			</view>

			<!-- 右侧商品列表 -->
			<view class="right-goods">
				<view v-for="(goods, goodsIndex) in currentGoodsList" :key="goodsIndex" class="goods-item" @click="goToDetail(goods)">
					<image :src="goods.image" class="goods-img" mode="aspectFit" />
					<view class="goods-info">
						<view class="goods-name">{{ goods.name }}</view>
						<view class="goods-intro">简介:{{ goods.intro }}</view>
						<view class="goods-sold">已售 {{ goods.sold }} 件</view>
						<view class="goods-price">￥{{ goods.price }}束</view>
					</view>
					<!-- <image src="/static/categories/cart.png" class="cart-icon" mode="aspectFit"
						@click.stop="addToCart(goods)" /> -->
						<image src="/static/categories/cart.png" class="cart-icon" mode="aspectFit"
							@click="goToGoodDetail" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0, // 当前选中的分类索引
				categoryList: [
					{name: "混合花束"},
					{name: "鲜花"},
					{name: "永生花"},
					{name: "花篮"},
					{name: "绿植花卉"},
				],
				// 修复：goodsList应为对象，每个属性对应分类索引的商品数组
				goodsList: {
				  0: [
				    {
				      "name": "春日恋曲混合花束",
				      "sold": 156,
				      "price": "129.9",
				      "image": "/static/images/spring_love_bouquet.jpg",
				      "intro": "以粉玫瑰、洋桔梗、满天星搭配，点缀小雏菊，色彩清新柔和，象征春日浪漫爱意，适合情人节、告白场景"
				    },
				    {
				      "name": "森系秘境混合花束",
				      "sold": 98,
				      "price": "149.9",
				      "image": "/static/images/forest_secret_bouquet.jpg",
				      "intro": "包含尤加利叶、向日葵、乒乓菊，搭配蕨类植物，呈现自然森系风格，适合户外婚礼、生日派对装饰"
				    },
				    {
				      "name": "轻奢典雅混合花束",
				      "sold": 76,
				      "price": "169.9",
				      "image": "/static/images/luxury_elegant_bouquet.jpg",
				      "intro": "由红玫瑰、郁金香、芍药组成，花材高端且花期长，包装采用鎏金质感材料，适合商务送礼、周年纪念"
				    },
				    {
				      "name": "童趣缤纷混合花束",
				      "sold": 112,
				      "price": "99.9",
				      "image": "/static/images/childish_colorful_bouquet.jpg",
				      "intro": "以彩色乒乓菊、迷你玫瑰、风车果搭配，造型活泼可爱，适合儿童生日、幼儿园活动赠礼"
				    },
				    {
				      "name": "复古油画混合花束",
				      "sold": 85,
				      "price": "139.9",
				      "image": "/static/images/vintage_oil_painting_bouquet.jpg",
				      "intro": "融合焦糖色玫瑰、复古康乃馨、银叶菊，色彩浓郁如油画，适合艺术展览、复古主题派对装饰"
				    },
				    {
				      "name": "清新田园混合花束",
				      "sold": 105,
				      "price": "109.9",
				      "image": "/static/images/fresh_country_bouquet.jpg",
				      "intro": "包含雏菊、勿忘我、薰衣草，搭配麦穗，充满田园气息，适合家居装饰、阳台造景"
				    },
				    {
				      "name": "婚礼主纱混合花束",
				      "sold": 63,
				      "price": "229.9",
				      "image": "/static/images/wedding_veil_bouquet.jpg",
				      "intro": "以白玫瑰、铃兰、满天星为主，搭配珍珠装饰，造型简约大气，是新娘主纱手捧花的经典选择"
				    },
				    {
				      "name": "商务庆典混合花束",
				      "sold": 92,
				      "price": "189.9",
				      "image": "/static/images/business_celebration_bouquet.jpg",
				      "intro": "由红掌、天堂鸟、鹤望兰组成，花型挺拔有质感，寓意事业蒸蒸日上，适合开业、乔迁庆典"
				    },
				    {
				      "name": "治愈系温暖混合花束",
				      "sold": 124,
				      "price": "119.9",
				      "image": "/static/images/healing_warm_bouquet.jpg",
				      "intro": "包含向日葵、橙色玫瑰、洋甘菊，色彩温暖明亮，传递治愈力量，适合探望病人、朋友鼓励"
				    },
				    {
				      "name": "ins风极简混合花束",
				      "sold": 88,
				      "price": "129.9",
				      "image": "/static/images/ins_minimalist_bouquet.jpg",
				      "intro": "以单色系花材（白绣球、灰紫色桔梗）搭配少量尤加利叶，包装简约，符合ins拍照审美，适合日常打卡、家居摆拍"
				    },
				    {
				      "name": "红玫瑰手捧花",
				      "sold": 186,
				      "price": "158.8",
				      "image": "/static/images/red_rose_bouquet.jpg",
				      "intro": "以单色系红玫瑰为主花材，搭配尤加利叶等清新配叶，花型饱满雅致。每朵玫瑰均经过精心挑选，花瓣层叠舒展，色泽浓郁鲜亮，传递热烈真挚的爱意，是情人节、纪念日等浪漫场合的优选花束，新鲜花材搭配专业包装，送达时依旧保持最佳状态。"
				    }
				  ],
				  1: [
				    {
				      name: "伯爵红茶",
				      sold: 285,
				      price: "45.9",
				      image: "/static/images/伯爵红茶.jpg",
				      intro: "精选印度阿萨姆红茶为基底，添加佛手柑精油，口感醇厚带清香，适合搭配牛奶制成奶茶，或单独冲泡，提神醒脑"
				    },
				    {
				      name: "红玫瑰",
				      sold: 865,
				      price: "52.0",
				      image: "/static/images/红玫瑰.jpg",
				      intro: "经典卡罗拉品种，花头饱满、花茎粗壮，花瓣层数多，瓶插期5-7天，适合情人节、纪念日赠送，象征爱情与浪漫"
				    },
				    {
				      name: "香水百合",
				      sold: 425,
				      price: "79.9",
				      image: "/static/images/香水百合.jpg",
				      intro: "浓香型白色百合，每枝含3个花苞，开花后香气浓郁但不刺鼻，瓶插期7-10天，适合卧室、客厅摆放，净化空气"
				    },
				    {
				      name: "康乃馨",
				      sold: 965,
				      price: "22.9",
				      image: "/static/images/康乃馨.jpg",
				      intro: "多层花瓣的粉色/红色康乃馨，花茎挺直，瓶插期10-14天，适合母亲节、教师节赠送，象征感恩与祝福"
				    },
				    {
				      name: "绣球花",
				      sold: 695,
				      price: "69.9",
				      image: "/static/images/绣球花.jpg",
				      intro: "花球硕大饱满（直径约15cm），花色含蓝、粉、白等，瓶插期7-10天，适合作为花艺主花，或单独插瓶提升空间格调"
				    },
				    {
				      name: "满天星",
				      sold: 585,
				      price: "18.9",
				      image: "/static/images/满天星.jpg",
				      intro: "细小密集的白色/粉色小花，如繁星点点，瓶插期15-20天，适合作为其他花材的配花，或单独插瓶营造简约氛围"
				    },
				    {
				      name: "雏菊",
				      sold: 615,
				      price: "25.9",
				      image: "/static/images/雏菊.jpg",
				      intro: "小巧灵动的多色雏菊（白、黄、橙），花茎纤细，瓶插期8-12天，适合搭配其他花材做花艺点缀，或单独插瓶营造清新感"
				    },
				    {
				      name: "洋桔梗",
				      sold: 185,
				      price: "39.9",
				      image: "/static/images/洋桔梗.jpg",
				      intro: "波浪绢感花瓣，花色清新（含白、粉、紫三色），瓶插期10-15天，适合花艺搭配或单独瓶插，点缀书桌、窗台"
				    },
				    {
				      name: "芍药",
				      sold: 385,
				      price: "59.9",
				      image: "/static/images/芍药.jpg",
				      intro: "大朵重瓣芍药（粉、白、紫），花瓣柔软饱满，开花后花径可达10cm，瓶插期5-8天，适合春季观赏，象征富贵"
				    },
				    {
				      name: "风信子",
				      sold: 225,
				      price: "29.9",
				      image: "/static/images/风信子.jpg",
				      intro: "多色风信子种球（蓝、紫、粉），种植后约20天开花，香气浓郁，适合水培观赏，花期结束后可保留种球次年复种"
				    },
				    {
				      name: "鸢尾花",
				      sold: 165,
				      price: "45.9",
				      image: "/static/images/鸢尾花.jpg",
				      intro: "蓝紫色鸢尾花，花型如蝴蝶，叶片修长翠绿，瓶插期7-9天，适合搭配简约花器，放在书房、客厅，营造优雅氛围"
				    }
				  ],
				  2: [
				    {
				      name: "永生玫瑰",
				      sold: 325,
				      price: "89.9",
				      image: "/static/images/永生玫瑰.jpg",
				      intro: "采用A级玫瑰制作，保留玫瑰的饱满花型与自然色泽，可保存2-3年，适合制作永生花礼盒，作为纪念礼物赠送"
				    },
				    {
				      name: "永生绣球",
				      sold: 118,
				      price: "69.9",
				      image: "/static/images/永生绣球.jpg",
				      intro: "大朵永生绣球花，颜色有蓝、粉、紫等，花球不易变形褪色，可单独插瓶或搭配其他永生花，作为家居长期装饰"
				    },
				    {
				      name: "永生洋桔梗",
				      sold: 128,
				      price: "45.9",
				      image: "/static/images/永生洋桔梗.jpg",
				      intro: "保留洋桔梗自然的绢感花瓣纹理，颜色持久不褪色，可与永生玫瑰、满天星搭配成花束，适合制作家居干花装饰"
				    },
				    {
				      name: "永生满天星",
				      sold: 209,
				      price: "35.9",
				      image: "/static/images/永生满天星.jpg",
				      intro: "细小密集的永生满天星，颜色有白、粉、蓝，蓬松感强，可作为配花搭配永生玫瑰，或单独装瓶，营造梦幻氛围"
				    },
				    {
				      name: "永生尤加利叶",
				      sold: 98,
				      price: "29.9",
				      image: "/static/images/永生尤加利叶.jpg",
				      intro: "带有灰色调的永生尤加利叶，叶片呈圆形，枝干有质感，适合作为花艺配叶，搭配玫瑰、绣球，提升整体层次感"
				    },
				    {
				      name: "永生蓬莱松",
				      sold: 86,
				      price: "32.9",
				      image: "/static/images/永生蓬莱松.jpg",
				      intro: "枝叶呈针状、蓬松柔软的永生蓬莱松，颜色为深绿色，适合作为花束、花篮的配叶，增加自然清新感"
				    },
				    {
				      name: "永生铃兰",
				      sold: 156,
				      price: "49.9",
				      image: "/static/images/永生铃兰.jpg",
				      intro: "小巧洁白的永生铃兰，花型如铃铛，象征“幸福归来”，适合制作小型花束或装饰在礼盒上，作为浪漫礼物"
				    },
				    {
				      name: "永生向日葵",
				      sold: 156,
				      price: "59.9",
				      image: "/static/images/永生向日葵.jpg",
				      intro: "采用真花脱水保色工艺，花盘饱满、花色鲜亮，可长期保存2-3年，无需养护，适合客厅、书房装饰，象征活力"
				    }
				  ],
				  3: [
				    {
				      name: "婚礼花篮",
				      sold: 95,
				      price: "199",
				      image: "/static/images/婚礼花篮.jpg",
				      intro: "采用粉色玫瑰、白色洋桔梗、尤加利叶搭配，花篮为白色铁艺材质，可作为婚礼迎宾区装饰或新人手捧花配套摆件"
				    },
				    {
				      name: "节日花篮",
				      sold: 158,
				      price: "159",
				      image: "/static/images/节日花篮.jpg",
				      intro: "根据节日主题定制（如春节用红牡丹、中秋用桂花），花篮为竹编材质，可作为节日送礼佳品，兼具观赏性与实用性"
				    },
				    {
				      name: "商务花篮",
				      sold: 89,
				      price: "299",
				      image: "/static/images/商务花篮.jpg",
				      intro: "采用红掌、天堂鸟、剑兰等高档花材，搭配黑色皮质花篮，整体大气庄重，适合公司开业、商务庆典赠送，彰显档次"
				    },
				    {
				      name: "家居装饰花篮",
				      sold: 179,
				      price: "99.9",
				      image: "/static/images/家居装饰花篮.jpg",
				      intro: "藤编材质的椭圆形花篮，内搭永生满天星、干尤加利叶，无需养护，可长期放置于客厅茶几、书架，提升家居质感"
				    },
				    {
				      name: "单层花篮",
				      sold: 129,
				      price: "89.9",
				      image: "/static/images/单层花篮.jpg",
				      intro: "圆形木质单层花篮，内搭小雏菊、满天星、尤加利叶，整体高度约30cm，适合放在玄关、餐桌，作为日常家居装饰"
				    },
				    {
				      name: "多层花篮",
				      sold: 76,
				      price: "259",
				      image: "/static/images/多层花篮.jpg",
				      intro: "三层金属架花篮，每层搭配不同花材（上层玫瑰、中层洋桔梗、下层满天星），高度约60cm，适合大型节日装饰或开业送礼"
				    },
				    {
				      name: "手提花篮",
				      sold: 145,
				      price: "129",
				      image: "/static/images/手提花篮.jpg",
				      intro: "皮质手提带的圆形花篮，内搭玫瑰、雏菊、满天星，整体重量轻、方便携带，适合作为生日、探访礼物赠送"
				    },
				    {
				      name: "传统型花篮",
				      sold: 89,
				      price: "119",
				      image: "/static/images/传统型花篮.jpg",
				      intro: "竹编材质的传统扇形花篮，内搭牡丹、菊花、松枝，符合传统审美，适合节日祭祖、长辈祝寿等场合赠送"
				    },
				    {
				      name: "竹编花篮",
				      sold: 205,
				      price: "79.9",
				      image: "/static/images/竹编花篮.jpg",
				      intro: "手工编织的椭圆形竹编花篮，无花材搭配（可自行插花），材质环保耐用，适合作为收纳篮或花艺容器，兼具实用性"
				    },
				    {
				      name: "金属花篮",
				      sold: 136,
				      price: "99.9",
				      image: "/static/images/金属花篮.jpg",
				      intro: "哑光黑色铁艺花篮，设计简约现代，可搭配永生花或仿真花，适合放在北欧风、工业风家居中，提升整体格调"
				    }
				  ],
				  4: [
				    {
				      name: "绿萝",
				      sold: 795,
				      price: "15.9",
				      image: "/static/images/绿萝.jpg",
				      intro: "四季常绿藤本植物，叶片翠绿有光泽，耐阴耐湿，可水培或土培，能有效吸收甲醛，适合办公室、卧室摆放，好养易活"
				    },
				    {
				      name: "吊兰",
				      sold: 395,
				      price: "19.9",
				      image: "/static/images/吊兰.jpg",
				      intro: "四季常绿垂吊植物，耐阴好养无需频繁浇水，可吸附空气中的甲醛等有害气体，适合阳台、窗台悬挂摆放"
				    },
				    {
				      name: "常青藤",
				      sold: 195,
				      price: "22.9",
				      image: "/static/images/常青藤.jpg",
				      intro: "叶片呈心形，藤蔓柔软可垂吊，适合悬挂在阳台或窗台，喜凉爽环境，可净化空气、吸附灰尘，为家居增添生机"
				    },
				    {
				      name: "彩叶芋",
				      sold: 135,
				      price: "39.9",
				      image: "/static/images/彩叶芋.jpg",
				      intro: "叶片色彩鲜艳（绿底带红、粉斑点），形状如盾牌，喜温暖湿润环境，适合放在明亮的客厅角落，作为观叶植物装饰"
				    },
				    {
				      name: "富贵竹",
				      sold: 495,
				      price: "29.9",
				      image: "/static/images/富贵竹.jpg",
				      intro: "茎干挺拔翠绿，可水培（无需土壤），象征“富贵吉祥”，瓶插期可长期存活，适合放在客厅、书房，寓意美好"
				    },
				    {
				      name: "茉莉花",
				      sold: 295,
				      price: "29.9",
				      image: "/static/images/茉莉花.jpg",
				      intro: "浓香型白色花材，花苞饱满且开花率高，可做室内香薰花，也可摘下新鲜花瓣用于茶饮点缀，清新解腻"
				    },
				    {
				      name: "菊花",
				      sold: 265,
				      price: "28.9",
				      image: "/static/images/菊花.jpg",
				      intro: "多色菊花（黄、白、橙），花瓣层次丰富，瓶插期12-15天，适合秋季观赏，或作为祭祀用花，象征高洁与怀念"
				    },
				    {
				      name: "月季",
				      sold: 365,
				      price: "35.9",
				      image: "/static/images/月季.jpg",
				      intro: "多色月季（粉、黄、红），花型似玫瑰但花瓣更薄，瓶插期7-10天，适合日常家居摆放，花期长、易养护"
				    },
				    {
				      name: "兰花",
				      sold: 125,
				      price: "89.9",
				      image: "/static/images/兰花.jpg",
				      intro: "名贵蝴蝶兰品种，花色为紫色，花型如蝴蝶飞舞，喜温暖湿润环境，适合放在客厅高端位置，象征高雅与尊贵"
				    },
				    {
				      name: "桂花",
				      sold: 198,
				      price: "39.9",
				      image: "/static/images/桂花.jpg",
				      intro: "金黄色细小桂花，香气浓郁清新，瓶插期5-7天，可摘下花朵晒干泡茶，或放在室内散发自然香气，适合秋季观赏"
				    }
				  ]
				}
			};
		},
		computed: {
			currentGoodsList() {
				return this.goodsList[this.currentIndex] || [];
			}
		},
		methods: {

			switchCategory(index) {
				this.currentIndex = index;
			},
			
			goToSearch() {
			    // 收集所有分类的商品数据（合并为一个数组）
			    const allGoods = [];
			    Object.values(this.goodsList).forEach(categoryGoods => {
			      allGoods.push(...categoryGoods);
			    });
			    // 跳转到搜索页并携带全量商品数据
			    uni.navigateTo({
			      url: `/pages/search/search?allGoods=${encodeURIComponent(JSON.stringify(allGoods))}`
			    });
			  },
			// 跳转到商品详情页
			goToDetail(goods) {
				uni.navigateTo({
					url: `/pages/goodsDetail/goodsDetail?goods=${encodeURIComponent(JSON.stringify(goods))}`,
				});
			},
			// 加入购物车逻辑
			// addToCart(goods) {
			// 	// 1. 获取本地购物车数据（若无则初始化空数组）
			// 	let cartList = uni.getStorageSync('cartList') || [];
			// 	// 2. 检查商品是否已在购物车，存在则数量+1，否则新增
			// 	const existingGoods = cartList.find(item => item.name === goods.name);
			// 	if (existingGoods) {
			// 		existingGoods.count = (existingGoods.count || 1) + 1;
			// 	} else {
			// 		cartList.push({
			// 			...goods,
			// 			count: 1
			// 		});
			// 	}
			// 	// 3. 保存购物车数据到本地
			// 	uni.setStorageSync('cartList', cartList);
			// 	// 4. 提示用户
			// 	uni.showToast({
			// 		title: '加入购物车成功',
			// 		icon: 'success',
			// 	});
			// },
		},
	};
</script>

<style scoped>
	/* 页面整体 */
	.category-page {
		height: 89vh;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	/* 搜索框 */
	.search-box {
		padding: 20rpx 30rpx;
		background-color: #f9f5ff;
	}

	.search-input {
		width: 100%;
		height: 70rpx;
		background-color: white;
		border-radius: 35rpx;
		padding-left: 70rpx;
		font-size: 28rpx;
		color: #666;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: 25rpx center;
		background-size: 28rpx;
		border: none;
	}

	/* 主体容器：左侧分类 + 右侧商品 */
	.main-container {
		flex: 1;
		display: flex;
		overflow: hidden;
		/* 防止内容溢出 */
	}

	/* 左侧分类列表 */
	.left-category {
		width: 200rpx;
		background-color: #f3e5f5;
		overflow-y: auto;
	}

	.category-item {
		height: 125rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #6a4894;
		border-bottom: 1px solid #e1bee7;
	}

	.category-item.active {
		background-color: white;
		color: #9c27b0;
		font-weight: bold;
		position: relative;
	}

	.category-item.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 8rpx;
		background-color: #9c27b0;
	}

	/* 右侧商品列表 */
	.right-goods {
		flex: 1;
		padding: 10px;
		overflow-y: auto;
		/* 商品过多时可滚动 */
	}

	.goods-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10px;
	}

	.goods-img {
		width: 100px;
		height: 100px;
		margin-right: 10px;
	}

	.goods-info {
		flex: 1;
	}

	.goods-name {
		font-weight: bold;
		margin-bottom: 5px;
	}

	.goods-sold {
		font-size: 12px;
		color: #999;
		margin-bottom: 5px;
	}

	.goods-price {
		font-size: 16px;
		color: #ff6700;
	}

	.add-btn {
		width: 30px;
		height: 30px;
		border: 1px solid #ff6700;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ff6700;
	}

	.cart-icon {
		width: 30px;
		height: 30px;
		margin-left: 10px;
	}

	.goods-intro {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制最多显示2行 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		/* 超出部分隐藏 */
	}

	.goods-name {
		font-weight: bold;
		margin-bottom: 3px;
		/* 调整与简介的间距 */
		font-size: 14px;
		/* 微调名称字体大小，优化排版 */
	}
</style>